import React from 'react';
import { useNavigate } from 'react-router-dom'; // 导入 useNavigate
import { Form, Input, Button } from 'antd'; // 导入 Ant Design 的 Form, Input, Button 组件
import './Login.css'; // 导入自定义的 CSS 文件
import {loginAPI} from "../../api/login"
const Login = () => {
  const navigate = useNavigate();

  const onFinish = (values) => {
    console.log('Received values of form: ', values);

    let data={
      username:values.username,
      password:values.password,
      rememberMe: true,
      tenantName: "家政"
    }
    loginAPI(data).then(res=>{
        localStorage.setItem("token",res.data.accessToken)
        // 在登录成功后，使用replace参数来替换当前的历史记录条目
        navigate('/home', { replace: true });
        console.log(res)
    })
    
  };

  return (
    <div className="login-container">
      <h1>Login</h1>
      <Form
        name="normal_login"
        className="login-form"
        initialValues={{ remember: true }}
        onFinish={onFinish}
      >
        <Form.Item
          name="username"
          rules={[{ required: true, message: '请输入用户名!' }]}
        >
          <Input
            prefix={<i className="anticon anticon-user" />}
            placeholder="请输入username"
          />
        </Form.Item>
        <Form.Item
          name="password"
          rules={[{ required: true, message: '请输入密码!' }]}
        >
          <Input
            prefix={<i className="anticon anticon-lock" />}
            type="password"
            placeholder="请输入password"
          />
        </Form.Item>
        <Form.Item>
          <Button
            type="primary"
            htmlType="submit"
            className="login-button"
          >
            登录
          </Button>
        </Form.Item>
      </Form>
    </div>
  );
};

export default Login;